import React from 'react';
import {Divider, Typography} from "@material-ui/core";
import {makeStyles} from "@material-ui/styles";
import Grid from "@material-ui/core/Grid";
import Box from "@material-ui/core/Box";
import IconButton from "@material-ui/core/IconButton";
import YouTubeIcon from '@material-ui/icons/YouTube';
import GitHubIcon from '@material-ui/icons/GitHub';

const drawerWidth = 300;

const useStyles = makeStyles(theme => ({
  footer: {
    // backgroundColor: theme.palette.primary.dark,
    backgroundColor: theme.palette.type === "light" ? theme.palette.common.white : theme.palette.grey[300],
    flexGrow: 1,
    padding: theme.spacing(3, 0, 3, 0),
    [theme.breakpoints.up("md")]: {
      marginLeft: drawerWidth,
    },
  },
  gutterBottom: {
    marginBottom: theme.spacing(2)
  },
  gridItem: {
    color: theme.palette.type === "light" ? theme.palette.grey[600] : theme.palette.grey[800],
    marginLeft: theme.spacing(5),
    marginRight: theme.spacing(6),
  },
  divider: {
    backgroundColor: theme.palette.grey[300]
  }
}));

export default function Footer() {
  const styles = useStyles();
  return (
    <>
      <Grid container>
        <Grid item xs>
          <Divider orientation="horizontal" className={styles.divider}/>
        </Grid>

        <Grid container justify="space-between" alignItems="flex-start" className={styles.footer}>

          <Grid item xs className={styles.gridItem}>
            <Typography variant="h6" className={styles.gutterBottom}>
              <b>Social Computing Group</b>
            </Typography>
            <Box onClick={() => window.open("https://www.uni-due.de/soco/")}>
              <img src="/images/logos/soco-logo.png" height='60' alt="Soco Logo"
                   style={{cursor: "pointer"}}/>
            </Box>
          </Grid>

          <Grid item xs className={styles.gridItem}>
            <Typography variant="h6" className={styles.gutterBottom}><b>Follow Us</b></Typography>
            <Typography variant="body2">Visit our GitHub & YouTube Channel</Typography>
            <Grid container alignItems="center">
              <IconButton onClick={() => window.open("https://github.com/ude-soco")}>
                <GitHubIcon style={{color: '#000'}}/>
              </IconButton>
              <IconButton onClick={() => window.open("https://www.youtube.com/channel/UCQV36Dfq-mfmAG0SqrQ_QbA")}>
                <YouTubeIcon color="secondary"/>
              </IconButton>
            </Grid>
          </Grid>

          <Grid item xs className={styles.gridItem}>
            <Typography variant="h6" className={styles.gutterBottom}><b>Contact Us</b></Typography>
            <Typography variant="body2">Universität Duisburg-Essen</Typography>
            <Typography variant="body2">Fakultät für Ingenieurwissenschaften</Typography>
            <Typography variant="body2">Abteilung INKO</Typography>
            <Typography variant="body2">Fachgebiet Social Computing</Typography>
            <Typography variant="body2">Forsthausweg 2</Typography>
            <Typography variant="body2" className={styles.gutterBottom}>47057 Duisburg</Typography>
            <Box>
              <img src="/images/logos/ude-logo.svg" height='60' alt="UDE Logo"
                   style={{cursor: "pointer"}}
                   onClick={() => window.open("https://www.uni-due.de/en/index.php")}/>
            </Box>
          </Grid>
        </Grid>
      </Grid>
    </>
  )
}
